import '../../pages/App.css';
import './Home.css'
import ClearSvg from '../../assets/clear-b0b780f3.svg';
import { useState, useRef,useEffect } from 'react'
import { Spin,Message  } from '@arco-design/web-react';
import copy from 'copy-to-clipboard';
import {
    useRecoilValue,
    useRecoilState
} from 'recoil';
import axios from 'axios';
import Home from './Home';

import { settingInfo, robotListState, chatList,settingInfoState } from './store'

let layerMap = {
    2:2,3:3,4:2,6:3,8:2,9:3
}

function All() {
    const robotList = useRecoilValue(robotListState);
    const setting = useRecoilValue(settingInfoState);

    const [layerCount, setLayerCount] = useState(2);
    const [list, setList] = useState(null)

    const [dialog, setDialog] = useRecoilState(chatList);
    const [sendState,setSendState] = useState(true)

    const childRef=useRef();

    useEffect(() => {
        let together_ids = setting.together_ids
        let all = robotList.filter((item)=>{
           return together_ids.includes(item.id)
        })
        setLayerCount(all.length)
        setList(all)
    }, [setting]);

    const copyText = (text) => {
        copy(text);
        Message.success('复制成功')
    }

    useEffect(() => {
        bindEnter()
    }, [])

    const bindEnter = (e) => {
        if (e && e.keyCode === 13 && e.shiftKey) {

        } else if (e && e.keyCode === 13) {
            // 阻止原生的换行事件
            e.preventDefault();
            // TODO: 发消息
            childRef.current.sendMsg(document.getElementById('myTextarea').value)
        }
    }

    const copyHtml = ((text) => {
        return <svg stroke="currentColor" onClick={()=>{
            copyText(text)
        }} fill="currentColor" strokeWidth="0" viewBox="0 0 512 512" className="self-top cursor-pointer invisible group-hover:visible mt-[12px] text-primary-text" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect width="336" height="336" x="128" y="128" fill="none" strokeLinejoin="round" strokeWidth="32" rx="57" ry="57"></rect><path fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="32" d="M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24"></path></svg>
    })

    const loading = ((item)=>{
        return (
            <div key={item.date} className="group flex gap-3 w-full flex-row">
                <div className="flex flex-col w-11/12  max-w-fit items-start gap-2">
                    <div className="rounded-[15px] px-4 py-2 w-full bg-secondary text-primary-text">
                        <span className="leading-tight" style={{ display: "inherit" }}>
                            {/* <span className='dian1'></span>
                            <span className='dian2'></span>
                            <span className='dian3'></span> */}
                            <Spin dot />
                        </span>
                    </div>
                </div>
            </div>
        )
    })

    return (
        <>
            <div className="main">
                <div className="px-[15px] py-3 h-full overflow-hidden" style={{paddingLeft:'0'}}>
                    <div className="flex flex-col overflow-hidden h-full">
                        <div className={"grid overflow-hidden grow auto-rows-fr gap-3 mb-3 grid-cols-" + (layerMap[layerCount])}>
                            {
                              list && list.map((currentChat) => {
                                    return (
                                        <div key={currentChat.id} className="flex flex-col overflow-hidden bg-primary-background h-full rounded-[10px]">
                                            <Home key={currentChat.id+'home'}  ref={childRef} data={currentChat}/>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className="flex flex-row gap-3">
                            <div className="flex flex-row items-center gap-3 rounded-[15px] bg-primary-background px-4 py-2 grow">
                                <div className="w-full flex flex-col justify-center" aria-expanded="false" aria-haspopup="listbox">
                                    <textarea
                                        id="myTextarea"
                                        className="resize-none overflow-x-hidden overflow-y-auto  w-full outline-none text-sm text-primary-text bg-transparent scrollbar-thin"
                                        autoComplete="off" name="input" placeholder="Shift+Enter添加换行"
                                        style={{ height: "20px" }}></textarea>
                                </div>
                                <div className="flex flex-row items-center gap-[10px] shrink-0">
                                    {
                                        sendState?<button onClick={() => {
                                            childRef.current.sendMsg(document.getElementById('myTextarea').value)
                                        }} type="submit" className="rounded-full text-base font-medium px-6 py-[5px] text-white bg-primary-blue">
                                            <div className="flex flex-row items-center gap-1 min-w-max"><span>发送</span></div>
                                        </button>
                                        :
                                        <button onClick={() => {
                                            childRef.current.cancelSend()
                                        }} type="submit" className="rounded-full text-base font-medium px-6 py-[5px] text-primary-text bg-secondary">
                                            <div className="flex flex-row items-center gap-1 min-w-max"><span>停止</span></div>
                                        </button>
                                    }
                                </div>
                            </div>
                        </div>
                        <div className='kong'></div>
                    </div>
                </div>
            </div>
        </>
    );
}

export default All;
